<template>
    <!-- 1.遍历数组/集合 -->
    <ul>
        <li v-for="hobby in hobbies">{{ hobby }}</li>
    </ul>
    <!-- 2.遍历对象的属性 -->
    <ul>
        <li v-for="attr in emp">{{ attr }}</li>
    </ul>
    <!-- 3.遍历对象集合/数组 -->
    <table>
        <tr>
            <th>编号</th>
            <th>用户名</th>
            <th>密码</th>
        </tr>
        <tr v-for="user in users">
            <td>{{ user.id }}</td>
            <td>{{ user.username }}</td>
            <td>{{ user.password }}</td>
        </tr>
    </table>
    <!-- 4.遍历数字,相当于for(int i = 1; i <= num; i++) -->
    <ul>
        <li v-for="i in num">{{ i }}</li>
    </ul>
</template>
<script setup>
import { reactive, ref } from 'vue';
const hobbies = ref(['吃饭', '睡觉', '打豆豆'])
const emp = reactive({ id: 1, name: 'admin', salary: '8000' })
const users = ref([{
    id: 1,
    username: 'admin',
    password: '111111'
}, {
    id: 2,
    username: 'jack',
    password: '222222'
}, {
    id: 3,
    username: 'lucy',
    password: '333333'
}])
const num = 10;

</script>